import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Table, Select, Loading } from '@icedesign/base';
// import TabSelect from '../../../../../../components/TabSelect/TabSelect';
import axios from 'axios';
import './index.css'
// import { GetUrlParam } from '../../../../../../baseConfig';

// const TabPane = Tab.TabPane;

export default class ProfitTable extends Component {
  static displayName = 'ProfitTable';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      numbers: [],
      dates: ["2018-03-31","2017-12-31","2017-09-30","2017-06-30","2017-03-31","2016-12-31","2016-09-30","2016-06-30","2016-03-31","2015-12-31","2015-09-30","2015-06-30","2015-03-31","2014-12-31","2014-09-30","2014-06-30", "2014-03-31"],
      value: '',
      diff: [],
      date:'',
      dataSource:[],
      visible:true
    };
  }

  componentDidMount() {
    this.getDates()
  }

  getProfitData(value) {
    axios({
        url: `${global.constants.GOLDEYEGETHOST}cattle/three_major_reports`,
        method: 'get',
        params: {
          secu_code: GetUrlParam("secu_code"),
          type: this.props.chartName,
          tab:'利润比对',
          time: value
        }
      })
      .then((response) => {
        // console.log("getProfitData",response.data)
        if(this.state.value == ''){
          this.setState({
            value: response.data.data.nowDate,
          })
        }
        this.setState({
          numbers: response.data.data.numbers,
          // dates: response.data.data.dates,
          visible: false
        });
        // if(this.state.init.length == undefined){
        //   this.setState({
        //     init: this.state.dates[0]
        //   })
        // }
      })
      .catch((error) => {
        console.log(error);
      });
  }

  getDates(){
    axios({
      url:`${global.constants.GOLDEYEGETHOST}cattle/three_major_reports_time`,
      method: 'get',
    })
    .then((response) => {
      // console.log("getDates",response.data.data)
      this.setState({
        dates:response.data.data
      })
    })
    .catch((error) => {
      console.log(error);
    });
  }

  getIncomeData(value) {
    axios({
      url: `${global.constants.GOLDEYEGETHOST}cattle/three_major_reports`,
      method: 'get',
      params: {
        secu_code: GetUrlParam("secu_code"),
        type: this.props.chartName,
        tab:'营收比对',
        time: value
      }
    })
    .then((response) => {
      // console.log("getIncomeData",response.data)
      if(this.state.date == ''){
        this.setState({
          date: response.data.data.nowDate,
        })
      }
      this.setState({
        dataSource: response.data.data.numbers,
        // dates: response.data.data.dates,
        visible: false
      });
    })
    .catch((error) => {
      console.log(error);
    });
  }
  componentWillMount(){
    this.getProfitData(this.state.dates[0]);
    this.getIncomeData(this.state.dates[0]);
  }

  onChangeTime(value) {
    this.setState({
      value: value,
      visible: true
    })
    this.getProfitData(value);
  }

  onChangeDate(value){
    this.setState({
      date: value,
      visible: true
    })
    this.getIncomeData(value);
  }

  renderFeature = (value,index,record) => {
    // console.log("renderFeature",value)
    let background = ''
    if(record.feature>0){
      background = `rgba(22,144,255,${record.feature})`;
    }
    if(record.feature<0){
      background = `rgba(208,2,27,${Math.abs(record.feature)})`;
    }
    return <div key={`Feature${index}`} style={{background:background,color:'#fff',padding:'2px',textAlign:'center'}}>{record.feature}</div>
  }

  renderPeriods = (value,index,record) => {
    // console.log("renderPeriods",value)
    let background = ''
    if(record.periods>0){
      background = `rgba(22,144,255,${record.periods})`;
    }
    if(record.periods<0){
      background = `rgba(208,2,27,${Math.abs(record.periods)})`;
    }
    return <div key={`Periods${index}`} style={{background:background,color:'#fff',padding:'2px',textAlign:'center'}}>{record.periods}</div>
  }

  cellRender = (value,index,record) => {
    let a =  Math.abs(record.feature-record.periods).toFixed(2);
    this.state.diff.push(a);
    let percent = parseFloat((a/2 *100)).toFixed(2);
    return (
      <div key={`cell${index}`}>
        {a}
      </div>
      
    )
  }

  render() {
    const tabs = [{
        tab: "利润比对",
        key: 0
    },{
        tab: "营收比对",
        key: 1
    }];
    let chartContentLeft = [];
    let chartContentRight = [];
    let selectTime = (
      <Select 
          // size='large'
          style={{width:'100%'}} 
          dataSource={this.state.dates} 
          value={this.state.value}
          onChange={this.onChangeTime.bind(this)} 
      />
    );

    let selectDate = (
      <Select 
          // size='large'
          style={{width:'100%'}} 
          dataSource={this.state.dates} 
          value={this.state.date}
          onChange={this.onChangeDate.bind(this)} 
      />
    );

    chartContentLeft.push((
        // <div style={{padding:'0 -20px'}}>
        //   {/* <ProfitTable stockCode={this.props.stockCode} chartName={tabs[i].tab}/> */}
        //   {/* <Introduction stockCode={this.props.stock_code} chartName={tabs[i].tab}/> */}
        // </div>
        <div style={{display:'inline-flex',padding:'0'}}>
          <Table key={`Table1`} dataSource={this.state.numbers} style={{width:'50%',padding:'0'}}>
            <Table.ColumnGroup title="利润比对" style={{textAlign:'center',color:'#151415',fontWeight:'Medium'}} >
              <Table.Column title="科目" width='33%' dataIndex="item"/>
              <Table.Column title="稳态特征" width='20%' cell={this.renderFeature}/>
              <Table.Column title={selectTime} width='25%' cell={this.renderPeriods}/>
              <Table.Column title="差值" width='12%' cell={this.cellRender} />
            </Table.ColumnGroup>
          </Table>

          <Table key={`Table2`} dataSource={this.state.dataSource} style={{width:'48%',padding:'0'}}>
            <Table.ColumnGroup title="营收比对" style={{textAlign:'center',color:'#151415',fontWeight:'Medium'}} >
              <Table.Column title="科目" width='33%' dataIndex="item"/>
              <Table.Column title="稳态特征" width='20%' cell={this.renderFeature}/>
              <Table.Column title={selectDate} width='25%' cell={this.renderPeriods}/>
              <Table.Column title="差值" width='12%' cell={this.cellRender} />
            </Table.ColumnGroup>
          </Table>
        </div>
    ))
    
    return (
      // <div>
        <IceContainer style={{padding:'0 0 0 10px',borderRadius:'0'}}>
          <Loading 
            style={{width: "100%",display:'block'}}
            visible={this.state.visible}
            shape="fusion-reactor"
          >
            {chartContentLeft}
            {/* <TabSelect tabs={tabs} content={chartContentLeft} /> */}
          </Loading>
        </IceContainer>
      // </div>
    );
  }
}
